<template>

	<view class="body">

		<view class="content">
			
			<view class="bottom-area">
				<view class="ba-logo">
					<image src="../../static/logo.png"></image>
				</view>
			</view>
			
			<view class="info-area">
			<view class="info">
				<view class="avatar">
					<image class="img" :src="worker_info.headimg"></image>
				</view>
				<view class="detail">
					<view class="d-name">
						<view class="dn-name">{{ worker_info.realname }}</view>
						<view class="dn-typename">{{ worker_info.typename }}</view>
					</view>
					<view class="d-comment">
						<view class="dc-icon iconfont iconrongyu"></view>
						<view class="dc-desc">
						服务{{ worker_info.totalnum }}次&nbsp;评分{{worker_info.comment_score}}
						</view>
					</view>
					<view class="d-jineng">
						<view class="dj-item" v-for="(item,index) in worker_info.jineng">{{ item }}</view>
					</view>
				</view>
			</view>

			<view class="cert" v-if="worker_info.certs && worker_info.certs.length > 0">
				<view class="c-head">证书</view>
				<view class="c-box">
					<image class="cbox-top" src="../../static/img/cert_top.png"></image>
					<image class="cbox-mid" :style="{height:cert_height}" src="../../static/img/cert_mid.png">
					</image>
					<image class="cbox-bottom" src="../../static/img/cert_bottom.png"></image>
					
					<view class="cert-content">
						<view class="cec-text" v-for="(item,index) in worker_info.certs">{{ item }}</view>
					</view>
				</view>
			</view>
</view>


			<view class="order-tab">
				<view class="order-tab2">
					<block v-for="(item, index) in datelist" :key="index">
						<view :class="'item ' + (curTopIndex == index ? 'on' : '')" @tap="switchTopTab"
							:data-index="index">
							<view class="datetext">{{item.week}}</view>
							<view class="datetext2">{{item.day}}</view>
							<view class="after" :style="{background:t('color1')}"></view>
						</view>
					</block>

				</view>
			</view>

			<view class="course-lists">

				<view class="cl-items">

					<view class="cli-item" v-for="(item,index) in datalist">
						<view class="cli-course" @tap="toggleMenu(item)">
							<view class="cc-title">{{ item.name }}</view>
							<view class="cc-arrow iconfont" :class="item.is_open ? 'icondaoxu' : 'iconjiantou'"></view>
						</view>
						<view class="cli-time-conatiner" v-if="item.is_open">
							<view class="cli-course-time" v-for="item2,index2 in item.work_time">
								<view class="cct-time">{{ item2.time }}</view>
								<view class="cct-btn" :class="item2.is_disabled ? 'disabled' : ''" @tap="yuyueConfirm(item,item2)">预约</view>
							</view>
						</view>
					</view>

				</view>
				<nodata v-if="nodata"></nodata>
			</view>
			
			
			<view class="cc-confirm" v-if="showConfirm">
				<view class="cc-mask"></view>
				<view class="cc-content">
					<view class="ccc-title">确定预约该课程吗？</view>
					<view class="ccc-detail">
						<view class="ccd-jiaolian">{{ cc_realname }}</view>
						<view class="ccd-name">{{ cc_name }}</view>
						<view class="ccd-time">{{ cc_time }}</view>
					</view>
					<view class="cc-btns">
						<view class="ccb-confirm" @tap="cc_confirm()">确定</view>
						<view class="ccb-cancel" @tap="cc_cancel()">取消</view>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	var app = getApp();

	export default {
		data() {
			return {
				worker_info: {},
				datelist: [],
				curTopIndex: 0,
				datalist: [],
				pagenum: 1,
				opt: {},
				nodata:false,
				cc_realname:'',
				cc_name:'',
				cc_time:'',
				cc_item:null,
				cc_item2:null,
				showConfirm:false,
				isfuwu:false,
				cert_height:0
			}
		},
		onLoad(opt) {
			this.opt = app.getopts(opt);
			this.type = this.opt.type || '';
			this.init_datelist()
			this.get_detail();
		},
		methods: {
			
			yuyueConfirm(item,item2){
				var that = this;
				if(item2.is_disabled){
					return;
				}
				that.cc_realname = that.worker_info.realname;
				that.cc_name = item.name;
				that.cc_time = item2.time;
				that.cc_item = item;
				that.cc_item2 = item2;
				console.log(that.cc_item);
				that.showConfirm = true;
			},
			cc_confirm(){
				
				var that = this;
				var proid = that.cc_item.id;
				var yydate = that.datelist[that.curTopIndex].date +' '+that.cc_item2.time;
				var prodata = proid;
				
				app.goto('/activity/yuyue/buy?prodata=' + prodata +'&yydate='+yydate+'&proid='+proid+'&worker_id='+that.worker_info.id);
				
			},
			cc_cancel(){
				var that = this;
				that.showConfirm = false;
			},
			toggleMenu(item){
				var newList = [];
				for(var idx in this.datalist){
					var _item = this.datalist[idx];
					if(_item.id == item.id){
						_item.is_open = !_item.is_open;
					}else{
						_item.is_open = false;
					}
					newList.push(_item);
				}
				this.datalist = newList;
			},
			switchTopTab(e) {
				var that = this;
				var index = parseInt(e.currentTarget.dataset.index);
				that.curTopIndex = index;
				that.get_detail();
			},
			get_detail() {
				var that = this;
				var id = this.opt.id || 2;
				app.get('ApiYuyue/peodetail', {
					id: id
				}, function(res) {
					that.loading = false;
					var data = res.data;
					
					var jineng = data.jineng;
					
					if(jineng && jineng.length > 0){
						if(jineng.indexOf('|') >= 0){
							data.jineng = jineng.split('|');
						}else if(jineng.indexOf('｜') >= 0){
							data.jineng = jineng.split('｜');
						}else if(jineng.indexOf(' ') >= 0){
							data.jineng = jineng.split(' ');
						}else if(jineng.indexOf('-') >= 0){
							data.jineng = jineng.split('-');
						}else{
							data.jineng = [jineng];
						}
					}else{
						data.jineng = [];
					}
					
					if(data.certs != null && data.certs.length > 0){
						if(data.certs.indexOf('|') >= 0){
							data.certs = data.certs.split('|');
						}else if(data.certs.indexOf('｜') >= 0){
							data.certs = data.certs.split('｜');
						}
					}else{
						data.certs = [];
					}

					that.cert_height = (data.certs.length * 1.3) +'rem'
					
					//console.log(data);
					that.worker_info = data;

					if (res.set) {
						that.video_status = res.set.video_status;
						that.video_title = res.set.video_title;
						that.video_tag = res.set.video_tag;
					}
					that.loaded();
					that.getdatalist();
				});
			},
			getdatalist(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.datalist = [];
				}
				var that = this;
				var pagenum = that.pagenum;
				var id = that.opt.id ? that.opt.id : '2';
				var field = that.field;
				that.loading = true;
				that.nodata = false;
				that.nomore = false;
				app.post('ApiYuyue/getdlist', {
					curTopIndex: 0,
					pagenum: pagenum,
					field: field,
					id: id,
					need_work_time:1
				}, function(res) {
					that.loading = false;
					uni.stopPullDownRefresh();
					var data = res.data;
					console.log(data.length);
					if (data.length == 0) {
						console.log(pagenum);
						if (pagenum == 1) {
							that.nodata = true;
						} else {
							that.nomore = true;
						}
					}
					var datalist = that.datalist;
					var newdata = datalist.concat(data);
					
					var date = new Date();
					var now_hm = parseInt(''+date.getHours()+date.getMinutes());
					var now_day = date.getDate();
					var select_day = parseInt(that.datelist[that.curTopIndex].day);
					//console.log(now_day+','+select_day);
					for(var idx in newdata){
						var item = newdata[idx];
						item.is_open = false;
						for(var idx2 in item.work_time){
							var item2 = item.work_time[idx2];
							
							item2.is_disabled = now_day == select_day && now_hm > parseInt(item2.timeint);
						}
					}
					
					that.datalist = newdata;
				});

			},
			get_cct_info() {
				var that = this;
				that.loading = true;
				app.get('ApiYuyue/isgetTime', {
					date: that.days,
					proid: this.opt.id
				}, function(res) {
					that.loading = false;
					that.timelist = res.data;
				})
			},
			init_datelist() {
				const daysOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const today = new Date();
				const recentWeekDates = [];

				for (let i = 0; i < 7; i++) {
					const date = new Date(today);
					date.setDate(today.getDate() + i);
					const weekDay = daysOfWeek[date.getDay()];
					const day = String(date.getDate()).padStart(2, '0');

					recentWeekDates.push({
						week: weekDay,
						day:day,
						date:date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()
					});
				}
				recentWeekDates[0].week = '今天';
				recentWeekDates[1].week = '明天';
				this.datelist = recentWeekDates;
			}
		}
	}
</script>

<style>
	
	.content{
		background-color: #ececec;
	}
	
	.cc-confirm,
	.cc-mask{
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
	}
	
	.cc-mask{
		background-color: black;
		opacity: 0.65;
		z-index: 666;
	}
	
	.cc-content{
		padding: 1rem;
		border-radius: 0.35rem;
		position: absolute;
		z-index: 667;
		top: 35%;
		width: 70%;
		left: 50%;
		margin-left: -35%;
		background-color: white;
	}
	
	.ccc-title{
		text-align: center;
		width: 100%;
		font-weight: bold;
		font-size: 1.1rem;
		height: 2.2rem;
		line-height: 2.2rem;
		margin-bottom: 0.5rem;
	}
	
	.ccc-detail{
		background-color: #dddddd;
		border-radius: 0.35rem;
		width: 85%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0.5rem;
	}
	
	.ccd-jiaolian{
		font-weight: bold;
		font-size: 1.0rem;
	}
	
	.ccd-jiaolian,
	.ccd-name,
	.ccd-time{
		height: 2rem;
		line-height: 2rem;
		text-align: center;
	}
	
	.cc-btns{
		display: flex;
		flex-direction: row;
		height: 2rem;
		justify-content: center;
		padding: 0.5rem;
	}
	
	.ccb-confirm{
		width: 8rem;
		height: 2rem;
		line-height: 2rem;
		background-color: red;
		color: white;
		text-align: center;
		border-radius: 0.35rem;
	}
	
	
	.ccb-cancel{
		width: 8rem;
		height: 2rem;
		line-height: 2rem;
		background-color: #ececec;
		color: black;
		text-align: center;
		margin-left: 0.5rem;
		border-radius: 0.35rem;
	}
	
	.ccb-cancel:active{
		background-color: #999999;
	}
	
	
	.body {
		background-color: white;
		height: 100vh;
		width: 100vw;
	}

	.content {
		display: inline-block;
		width: 100%;
		background-color: #ececec;
	}

	.info {
		margin: 1rem;
		display: flex;
		flex-direction: row;
	}

	.avatar {
		width: 6rem;
		height: 6rem;
		border: 0.25rem
	}

	.img {
		width: 6rem;
		height: 6rem;
		background-color: #f7f7f7;
		border-radius: 0.35rem;
	}

	.detail {
		display: flex;
		flex-direction: column;
		margin-left: 1.5rem;
		height: 6rem;
	}

	.d-name {
		height: 2rem;
		display: flex;
		flex-direction: row;
	}
	
	.dn-name{
		font-weight: bold;
		font-size: 1.5rem;
	}
	.dn-typename{
		font-size: 0.9rem;
		margin-left: 1rem;
		height: 2rem;
		line-height: 2rem;
	}

	.d-comment {
		height: 2rem;
		line-height: 2rem;
		display: flex;
		flex-direction: row;
	}
	.dc-icon{
		width:1.5rem;
		flex-shrink: 0;
		font-size: 1.5rem;
		color: red;
		font-weight: bold;
	}
	
	.dc-desc{
		width: 100%;
		font-weight: bold;
	}

	.d-jineng {
		height: 2rem;
		line-height: 2rem;
		display: flex;
		flex-direction:row;
	}
	
	.dj-item{
		width: 3rem;
		height: 1.5rem;
		line-height: 1.5rem;
		text-align: center;
		background-color: #eaeaea;
		border-radius: 0.15rem;
		margin-right: 0.5rem;
	}

	.cli-course {
		height: 2.5rem;
		border-bottom: 0.01rem solid #dadada;
		display: flex;
		background-color: white;
	}
	
	.cc-title{
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 1.2rem;
		text-align: left;
		color: black;
		font-weight: bold;
		width: 100%;
		padding-left: 0.5rem;
	}
	
	.cc-arrow{
		width: 3rem;
		flex-shrink: 0;
		text-align: center;
		font-size: 2rem;
	}

	.cli-course-time {
		height: 2.0rem;
		display: flex;
		flex-direction: row;
		margin-top: 0.5rem;
		border-bottom: 0.01rem dashed #dddddd;
		padding-bottom: 2.5rem;
	}
	
	.cli-time-conatiner{
		height: auto;
		background-color: white;
		height: 15rem;
		overflow-y: auto;
	}

	.cct-time {
		width: 100%;
		height: 2.5;
		padding-left: 0.5rem;
		line-height: 2.5rem;
	}

	.cct-btn {
		background-color: red;
		height: 2rem;
		line-height: 2rem;
		flex-shrink: 0;
		width: 5rem;
		border-radius: 0.35rem;
		text-align: center;
		color: white;
		margin-right: 0.5rem;
	}
	
	.cct-btn.disabled{
		background-color: #dddddd;
		color: white;
	}
	
	.sep{
		height: 0.5rem;
		background-color: #dddddd;
		width: 100%;
	}

	.order-tab {
		margin-top: 22rem;
		background-color: white;
	}

	.order-tab2 {
		display: flex;
		width: auto;
		min-width: 100%;
		overflow-x: scroll;
		background-color: white;
	}

	.order-tab2 .item {
		width: auto;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
		color: #999999;
		overflow: hidden;
		flex-shrink: 0;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 14.28%;
	}

	.order-tab2 .item .datetext {
		line-height: 60rpx;
		height: 60rpx;
		color: black;
	}

	.order-tab2 .item .datetext2 {
		line-height: 60rpx;
		height: 60rpx;
		font-size: 28rpx;
		font-weight: normal;
	}

	.order-tab2 .on,
	.order-tab2 .on .datetext {
		color: #ff0000;
	}

	.order-tab2 .after {
		display: none;
		margin-left: 0rpx;
		bottom: 5rpx;
		height: 6rpx;
		border-radius: 1.5px;
		width: 70rpx
	}

	.order-tab2 .on .after {
		display: block
	}
	
	.c-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 0.85rem);
		justify-content: center;
		position: relative;
	}
	
	.cbox-top,
	.cbox-bottom{
		height: 2rem;
		width: 100%;
	}
	
	.cbox-mid{
		width: 100%;
		min-height: 1rem; 
	}
	
	.cert{
		padding-left: 0.5rem;
	}
	.cert,
	.course-lists{
		margin-right: 0.5rem;
		width: 100%;
		background-color: white;
	}
	
	.cert-content{
		position: absolute;
		top:2rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: calc(100% - 2rem);
		left: 1rem;
	}
	
	.cec-text{
		text-align: center;
		height: 1.5rem;
		line-height: 1.5rem;
		font-size: 0.9rem;
		width: 100%;
		color: #caa382;
		font-weight: bold;
	}
	
	.c-head{
		font-weight: bold;
		height: 2rem;
		line-height: 2rem;
		font-size: 1.1rem;
	}
	
	.bottom-area{
		height: 8rem;
		background-color: red;
		width: 100%;
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.ba-logo{
		height: 3rem;
		text-align: center;
	}
	
	.ba-logo image{
		height: 100%;
	}
	
	.info-area{
		background-color: white;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		margin: 0.5rem;
		border-radius: 0.35rem;
		position: absolute;
		z-index: 2;
		top: 3rem;
		width: calc(100% - 0.85rem);
	}
	
</style>